<template>
  <div class="vs-doing-count">
    <VsModuleTitle name="各区县在办件统计">
      <div class="title-page">
        <!-- <span v-for="item in activeList" :key="item" :class="['title-page-item', activeType == item ? 'title-page-active' : '']" @click.stop="handleClick(item)" @mouseleave.stop="mouseleaveSpan" @mouseover.stop="timer = null"></span> -->
      </div>
    </VsModuleTitle>
    <div class="vs-doing-count__content">
      <div class="dc-table">
        <div class="dc-table-header">
          <div class="dct-1">地区</div>
          <div class="dct-2">已办结</div>
          <div class="dct-3">在办</div>
          <div class="dct-4">超时</div>
        </div>
        <div class="dc-table-body">
          <superslide
            :options="options"
            class="txtMarquee-top"
            v-if="dataList.length"
          >
            <div class="dcb-table">
              <ul>
                <li
                  class="dcb-t"
                  v-for="item in dataList"
                  :key="item.addressCode"
                >
                  <div
                    class="dct-1"
                    :title="item.addressName"
                    @click="queryToSearchByName(item)"
                  >
                    {{ item.addressName }}
                  </div>
                  <div
                    class="dct-2"
                    :title="item.approvalInfo.third"
                    @click="queryToSearchByFinish(item)"
                  >
                    {{ item.approvalInfo.third }}
                  </div>
                  <div
                    class="dct-3"
                    :title="item.approvalInfo.nowDo"
                    @click="queryToSearchByNowDo(item)"
                  >
                    {{ item.approvalInfo.nowDo }}
                  </div>
                  <div
                    class="dct-4"
                    :title="item.approvalInfo.overTime"
                    @click="queryToSearchByOverTime(item)"
                  >
                    {{ item.approvalInfo.overTime }}
                  </div>
                </li>
              </ul>
            </div>
          </superslide>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="less"></style>

<script>
import VsModuleTitle from "../ModuleTitle/index";
export default {
  name: "VsDoingCount",
  components: {
    VsModuleTitle
  },
  filters: {},
  props: {
    dataList: Array
  },
  data() {
    return {
      options: {
        mainCell: ".dcb-table ul",
        autoPlay: true,
        effect: "topMarquee",
        vis: 5,
        interTime: 50
      }
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  updated() {},
  activated() {},
  deactivated() {},
  beforeDestroy() {},
  methods: {
    queryToSearchByOverTime(row) {
      row.maxTime = -1;
      this.$router.push({
        path: "./search",
        query: row
      });
    },
    queryToSearchByNowDo(row) {
      row.maxTime = 1;
      this.$router.push({
        path: "./search",
        query: row
      });
    },
    queryToSearchByFinish(row) {
      row.maxTime = 2;
      this.$router.push({
        path: "./search",
        query: row
      });
    },
    queryToSearchByName(row) {
      this.$router.push({
        path: "./search",
        query: row
      });
    }
  }
};
</script>

<style lang="less">
@tableHeight: 24.8vh;
.vs-doing-count {
  margin-top: 20px;
  /*height: 365px;*/
  /*滚动插件样式*/
  .txtMarquee-top {
    width: 400px;
    overflow: hidden;
    position: relative;
  }
  .dcb-table {
    overflow: hidden;
    height: @tableHeight;
  }
  .tempWrap {
    height: @tableHeight !important;
  }

  &__content {
    background-color: rgba(12, 26, 58, 0.4);
    overflow: hidden;

    .dc-table {
      box-sizing: border-box;

      .dct-1,
      .dct-2,
      .dct-3,
      .dct-4 {
        width: 24%;
        text-align: center;
        font-size: 16px;
        color: #ffffff;
        letter-spacing: 0;
        text-align: center;
        overflow: hidden;
        cursor: pointer;
        /*text-overflow: ellipsis;*/
        /*white-space: nowrap;*/
      }

      .dc-table-header {
        display: flex;
        padding-left: 5px;
        font-weight: bolder;
        margin: 15px 0 4px;
        box-sizing: border-box;
        font-family: PingFangSC-Semibold;
      }

      .dc-table-body {
        overflow: auto;
        font-family: PingFangSC-Regular;

        .dcb-t {
          height: 38px;
          line-height: 38px;
          margin-bottom: 8px;
          display: flex;
          box-sizing: border-box;
          border-left: 5px solid #0261e9;
          background-image: linear-gradient(
            270deg,
            rgba(255, 255, 255, 0.075) 0%,
            rgba(0, 191, 255, 0.125) 98%
          );
        }
      }
    }
  }

  .title-page {
    display: flex;
    align-items: center;

    .title-page-item {
      display: inline-block;
      width: 5px;
      height: 5px;
      border-radius: 3px;
      background-color: rgba(167, 167, 167, 0.4);
      margin-left: 15px;
      cursor: pointer;
    }

    .title-page-active {
      background-color: #ffffff;
    }
  }
}
</style>
